<!DOCTYPE HTML>
<html id="app">

<head>
<title>report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/core.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/lteIE8.css" />
<![endif]-->
</head>

<body class="report">

<div class="header">
	<div class="topMenu">
		<span></span>
		<span></span>
		<span></span>
	</div>
	鹰眼数据报表
	<div id="weidu" style="float:right"></div>
</div>
<!-------------------------------------------------->
<div class="side">
	<ul>
		<li>师傅的说法</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
		<li>发的发的说法是否</li>
	</ul>
</div>
<!-------------------------------------------------->
<div class="article">
	<div>
		<img src="images/graph-1.png" />
		<div class="info">
			<h2>第一周数据展示</h2>
			<label>描述：折现图表信息</label>
			<span>2015-1-1</span>
		</div>
	</div>
	<div>
		<img src="images/graph-2.png" />
		<div class="info">
			<h2>第二周数据展示</h2>
			<label>描述：折现图表信息</label>
			<span>2015-1-8</span>
		</div>
	</div>
	<div>
		<img src="images/graph-3.png" />
		<div class="info">
			<h2>第三周数据展示</h2>
			<label>描述：折现图表信息</label>
			<span>2015-1-16</span>
		</div>
	</div>
	<div>
		<img src="images/graph-3.png" />
		<div class="info">
			<h2>第四周数据展示</h2>
			<label>描述：折现图表信息</label>
			<span>2015-1-24</span>
		</div>
	</div>
</div>

<!-------------------------------------------------->
<div class="tip">
	请把手机横过来看！
</div>
<!-------------------------------------------------->
<div class="footer">
	小桔科技 滴滴打车
</div>

<DIV id="myweidu">
	<div class="WD">
		<label>城市：</label>
		<div>
			<select class="city">
				<option value="">北京</option>
				<option value="">上海</option>
				<option value="">天津</option>
				<option value="">广州</option>
			</select>
		</div>
	</div>
</DIV>

</body>

</html>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/iPhoneLayer.js"></script>
<script type="text/javascript" src="js/phonePop.js"></script>
<script type="text/javascript">

var bodyH = document.documentElement.offsetHeight;
var bodyW = document.documentElement.offsetWidth;
var bodyCH = document.documentElement.clientHeight;

var app = {};
app.init = function(){
	if(bodyW<1280)
	{
		app.onresize();
	}

	window.onresize = document.onresize = function(){
		app.onresize();
	}

	app.phoneEvent();

}

app.onresize = function(){
	$(".article img").height(bodyH-70);
	//$(".side").height(bodyH-45);
}

app.phoneEvent = function(){
	$(".header .topMenu").bind("click",function(){
		var sideLeft = $(".side").css("left");
		if(sideLeft == "0px")
		{
			$(".side").css("left","-280px");
		}
		else
		{
			$(".side").css("left","0");
		}
	});
}


app.init();


iPhoneLayer.initLayer({
	tipHTML : '<div class="sun"><ul><li><span>&nbsp;</span></li></ul></div>',
	menus : [
		{
			name  : "",
			icon  : "icon1",
			text  : "信息",
			index : 1,
			type  : "",
			url   : "http://www.baidu.com",
			level : 0 ,
			children:[
				{
					name : "",
					icon : "icon2",
					index: 1 ,
					type  : "",
					url   : "",
					level : 1
				}
			]
		} , 
		{
			icon  : "icon2",
			text  : "收藏夹",
			type  : 2,
			level : 0,
			onClick :function(data){
				alert(JSON.stringify(data));
			}
		},
		{
			icon  : "icon2",
		},
		{
			icon  : "icon2",
		},
		{
			icon  : "icon2",
		},
		{
			icon  : "icon2",
		},
		{
			icon  : "icon2",
		},
		{
			icon  : "icon2",
		}

	] , 
	grid : {
	cellWidth:50,
	cellHeight:50,
	rowCount : 2,
	colCount : 3
	}
});



var pop = new phonePop("#weidu",{
	tipHTML : '<div class="sun"><div>筛选条件</div></div>',
	width : "70%" ,
	height : 100 ,
	HTML   : $("#myweidu")
});

$(".WD span").click(function(){
	pop.hide();
});
</script>